<!-- 团队赛积分 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup ref="popup">
    <div class="content">
      <div class="title">恭喜您昨日团队赛共获得积分</div>
      <div class="point">{{ totalPoint }}</div>
      <div class="table">
        <div class="t-head">
          <div class="row">
            <div class="t-cell">任务</div>
            <div class="t-cell">获得积分</div>
          </div>
        </div>
        <div class="t-body">
          <div class="row" v-for="(item, index) in tableData" :key="index">
            <div class="t-cell">{{ item.propName }}</div>
            <div class="t-cell red">{{ item.propValue }}</div>
          </div>
        </div>
      </div>
      <div class="check-btn" @click="toCheckTeamPoint">查看积分榜单</div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close-btn" @click="close">
      <image
        class="close-btn-img"
        src="@/static/icons/common/close.png"
        alt=""
      />
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { reqGetYesterdayPointData } from "@/api/api-activity";

/** 当前组件实例 */
const currentInstance = getCurrentInstance();

/** 弹窗打开 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  initData();
  if (popup.open) {
    popup.open();
  }
};

/** 弹窗关闭 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.close) {
    popup.close();
    emit("popupClose");
  }
};

/**
 * 跳转查看积分榜单
 */
const toCheckTeamPoint = () => {
  uni.switchTab({
    url: "/pages/team-invitation-competition",
  });
  // 跳转的同时关闭当前弹窗
  close();
};

// 列表数据
const tableData = ref([]);
// 总积分
const totalPoint = ref(0);

const initData = async () => {
  try {
    const res = await reqGetYesterdayPointData();
    console.log("积分弹窗数据>>>", res.data.data);
    tableData.value = res.data.data.teamTaskList.map((item: any) => ({
      propName: item.title,
      propValue: parseFloat(item.score),
    }));
    totalPoint.value = tableData.value.reduce(
      (acc, cur: any) => acc + cur.propValue,
      0
    );
  } catch (err) {
    console.log(err);
    // 进入此异常分支 说明还没有创建团队,直接关闭弹窗
    close();
  }
};
defineExpose({
  open,
  close,
});

const emit = defineEmits<{
  (event: "popupClose"): void;
}>();
</script>

<style scoped lang="scss">
.content {
  width: 658rpx;
  height: 1190rpx;
  background-image: url("https://ustatic.hudongmiao.com/miao/activity/teamPoint.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 220rpx;
  position: relative;
  .title {
    font-size: 38rpx;
    font-weight: 400;
    color: #333333;
  }
  .point {
    margin-top: 6rpx;
    font-size: 92rpx;
    font-weight: 600;
    color: #ff403c;
  }
  .table {
    margin-top: 13rpx;
    width: 619rpx;
    height: 68%;
    overflow-y: scroll;
    .t-head {
      background-color: #f9f9f9;
      border-top-left-radius: 8rpx;
      border-top-right-radius: 8rpx;
      font-size: 23rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
      .row {
        height: 71rpx;
        display: flex;
        .t-cell {
          width: 50%;
          height: 100%;
          text-align: center;
          line-height: 71rpx;
        }
      }
    }
    .t-body {
      font-size: 23rpx;
      font-weight: 400;
      color: #000000;
      .row {
        height: 54rpx;
        display: flex;
        background-color: #f9f9f9;
        .t-cell {
          width: 50%;
          height: 100%;
          text-align: center;
          line-height: 54rpx;
          &.red {
            color: #ff403c;
          }
        }
        &:nth-child(odd) {
          background-color: #fff;
        }
      }
    }
  }
  .check-btn {
    font-size: 29rpx;
    font-weight: 500;
    color: #ffffff;
    width: 462rpx;
    height: 69rpx;
    background: linear-gradient(270deg, #864ce4 0%, #272fd9);
    border-radius: 65rpx;
    text-align: center;
    line-height: 69rpx;
    margin-top: 31rpx;
  }
}
// 关闭按钮
.close-btn {
  position: absolute;
  width: 65rpx;
  height: 65rpx;
  right: 17rpx;
  top: 90rpx;
  z-index: 1;
  .close-btn-img {
    width: 100%;
    height: 100%;
  }
}
</style>
